<template>
	<view>
		<view v-if="!types" class="flex_start flex_items">
			<view class="">
				<view v-if='!room' class="flex_items flex_center" @click="getISProduct"
					style="width: 124rpx;height: 124rpx;background: #F0E1CD;border-radius: 50%;">
					<image :src="music_play ? stop_img : start_img" mode="widthFix" style="width: 50rpx;height: 50rpx;">
					</image>
				</view>
				<view v-else class="flex_items flex_center" style="width:50rpx;height:50rpx;">
					<image @click="getISProduct" :src="music_play ? stop_img : start_img" mode="widthFix"
						style="width: 50rpx;height: 50rpx;">
					</image>
				</view>
			</view>
			<view class="flex_column">
				<text class="bold f30 ml20" style="color: #000000;">{{AUDIO.name}}</text>
				<view v-if='!room' class="flex_start flex_items ml20">
					<text style="color: #999999;" class="f24">{{ getMinuteTime(now_time) }}</text>
					<view class="progress flex_start flex_items">
						<slider :value="(now_time / total_time) * 100" block-size="10" block-color="#498FFF"
							activeColor="#498FFF" @change="sliderChange" style="width: 320rpx;">
						</slider>
						<text style="color: #999999;" class="f24">{{ getMinuteTime(total_time) }}</text>
					</view>
				</view>
				<view v-else class="flex_start flex_items">
					<view class="progress flex_start flex_items">
						<slider :value="(now_time / total_time) * 100" block-size="10" block-color="#498FFF"
							activeColor="#498FFF" @change="sliderChange"
							style="width:200rpx;margin: 20rpx 20rpx 20rpx 36rpx"></slider>
						<text style="color: #999999;" class="f24">{{ getMinuteTime(total_time) }}</text>
						<text class="f24 ml10 mr10" style="color: #999999;">/</text>
					</view>
					<text style="color: #999999;" class="f24">{{ getMinuteTime(now_time) }}</text>
				</view>
			</view>
		</view>
		<view v-else class="flex_column" style="align-items: center;" @click="getISProduct">
			<image :src="music_play ? stop_img : start_img " mode="widthFix" style="width: 50rpx;height: 50rpx;">
			</image>
			<text style="color: #1E4F4D;margin-top: 10rpx;" class="f24 f-center">{{daotime2||'00:00'}}</text>
		</view>
	</view>

</template>

<script>
	import {
		GetAdtGuideRecordAdd,
	} from '@/api/qxlj.js';
	import {
		GetUserProduct
	} from '@/api/api.js'
	export default {
		name: 'WZSAudio',
		props: ['music', 'image', 'title', 'autoplay', 'types', 'room', 'num', 'zid', 'rooms', 'PlayID', 'product'],
		data() {
			return {
				music_play: false,
				AUDIO: '',
				total_time: '',
				now_time: 0,
				timeupdata: '',
				interval: '',
				start_img: "",
				stop_img: "",
				daotime: null,
				daotime2: "",
				isht: 0,
				isTimeRunning: false, //定时器标识
			}
		},
		watch: {
			music: {
				deep: true,
				handler() {
					this.watSrc();
				}
			},
		},
		mounted() {
			if (uni.getStorageSync('nowtime')) {
				this.now_time = uni.getStorageSync('nowtime')
				this.music_play = false
			}
			if (this.room == 1 || this.rooms == 1) {
				this.now_time = 0
				uni.setStorageSync('nowtime', 0)
				this.music_play = false;
			}
			// this.autoplay = true
			this.playAudio()
		},
		methods: {
			//监听src发生改变
			watSrc() {
				this.AUDIO.pause();
				this.AUDIO.destroy();
				this.AUDIO = null;
				this.music_play = false;
				clearInterval(this.interval)
				clearInterval(this.timeupdata)
				clearInterval(this.timejian)
				this.playAudio();
				this.isTimeRunning = false;
			},
			//判断当前音频是否被购买 购买后即可听语音讲解服务
			async getISProduct() {
				try {
					const {
						Data
					} = await GetUserProduct(this.product)
					// this.clickAudio();
					console.log(Data)
					if (Data != null) {
						this.clickAudio();
					} else {
						this.$emit('getIsFalse', this.product);
					}
				} catch {

				}
			},
			//监听用户播放并记录到后台
			async getAddPerson(e) {
				try {
					const {
						Data
					} = await GetAdtGuideRecordAdd({
						PlayID: this.PlayID,
					});
					console.log(Data)
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			// 播放音乐
			playAudio() {
				uni.setStorageSync('nowtime', 0)
				if (this.music_play) {
					this.getAddPerson();
				}
				this.AUDIO = uni.createInnerAudioContext()
				this.AUDIO.src = this.music
				this.AUDIO.name = this.title
				if (uni.getStorageSync('nowtime')) {
					this.AUDIO.volume = 0
				}
				if (this.rooms == 1) {
					this.AUDIO.volume = 0.9;
					// this.AUDIO.autoplay = true; //自动播放
					//音乐播放
					// this.AUDIO.play()
				}
				this.now_time = 0;
				this.interval = setInterval(() => {
					if (this.AUDIO.duration != 0 && !isNaN(this.AUDIO.duration)) {
						this.total_time = Math.round(this.AUDIO.duration)
						this.daotime = Number(this.total_time)
						let minute = parseInt(this.total_time / 60)
						let second = parseInt(this.total_time % 60)
						if (minute.toString().length == 1) minute = `0${minute}`
						if (second.toString().length == 1) second = `0${second}`
						this.daotime2 = `${minute}:${second}`
						console.log('音频时长', this.total_time)
						clearInterval(this.interval)
					}
				}, 100)
				this.timeupdata = setInterval(() => {
					// console.log((this.now_time / this.total_time) * 100)
					if (this.music_play) {
						this.now_time++
						// if (!this.room) {
						uni.setStorageSync('nowtime', this.now_time)
						// }
						// console.log('当前时间', this.getMinuteTime(this.now_time))
						if (this.now_time >= this.total_time) {
							this.music_play = false
							this.now_time = 0
							uni.removeStorageSync('nowtime')
						}
					}
				}, 1000)
			},
			//判断当前音频是否被购买 购买后即可听语音讲解服务

			clickAudio(e) {
				if (!this.music_play) {
					this.getAddPerson();
				}
				let that = this
				that.AUDIO.volume = 0.9;
				if (that.music_play) {
					that.music_play = false;
					that.AUDIO.pause();
				} else {
					that.music_play = true;
					if (uni.getStorageSync('nowtime')) {
						that.now_time = uni.getStorageSync('nowtime')
						that.AUDIO.seek(that.now_time)
					}
					that.AUDIO.play();
				}
				if (!that.isTimeRunning) {
					this.timejian = setInterval(function() {
						if (that.daotime == 0) {
							that.daotime = Number(that.total_time)
							let minute = parseInt(that.total_time / 60)
							let second = parseInt(that.total_time % 60)
							if (minute.toString().length == 1) minute = `0${minute}`
							if (second.toString().length == 1) second = `0${second}`
							that.daotime2 = `${minute}:${second}`
							console.log('=======that.daotime==0========')
							console.log(that.daotime2)
							that.isTimeRunning = false;
							that.clearTime();
						} else if (that.music_play) {
							that.daotime = Number(that.daotime) - 1
							let minute = parseInt(that.daotime / 60)
							let second = parseInt(that.daotime % 60)
							if (minute.toString().length == 1) minute = `0${minute}`
							if (second.toString().length == 1) second = `0${second}`
							that.daotime2 = `${minute}:${second}`;
							console.log('======that.music_play=========')
							console.log(that.daotime2)
						} else if (that.now_time == 0) {
							that.daotime = Number(that.total_time)
							let minute = parseInt(that.total_time / 60)
							let second = parseInt(that.total_time % 60)
							if (minute.toString().length == 1) minute = `0${minute}`
							if (second.toString().length == 1) second = `0${second}`
							that.daotime2 = `${minute}:${second}`
							console.log('=======that.daotime==0========')
							console.log(that.daotime2)
							that.isTimeRunning = false;
							that.clearTime();
						}
					}, 1000)
					that.isTimeRunning = true; // 设置标志变量表示定时器正在运行
				}
			},
			clearTime() {
				this.music_play = false
				this.AUDIO.pause()
				clearInterval(this.timejian)
			},
			closepause(e) {
				this.music_play = false
				if (this.room) {
					this.$emit('eash', false)
				}
				this.AUDIO.pause()
			},
			// 拖动进度条
			sliderChange(e) {
				console.log(e)
				const second = (e.detail.value / 100) * this.total_time
				this.AUDIO.seek(second)
				this.now_time = second
			},
			// 秒转换分秒
			getMinuteTime(data) {
				let minute = parseInt(data / 60)
				let second = parseInt(data % 60)
				if (minute.toString().length == 1) minute = `0${minute}`
				if (second.toString().length == 1) second = `0${second}`
				return `${minute}:${second}`
			},
			// z秒转换分秒倒计时
			getMinuteTimedao(data) {
				this._interval = setInterval(function() {
					if (data == '') {
						return false
					}
					if (data == 0) {
						clearInterval(this._interval)
					} else {
						data--
						let minute = parseInt(data / 60)
						let second = parseInt(data % 60)
						if (minute.toString().length == 1) minute = `0${minute}`
						if (second.toString().length == 1) second = `0${second}`
						return `${minute}:${second}`
					}
				}, 1000)
			},
		},
		destroyed() {
			this.music_play = false
			this.AUDIO.pause()
			clearInterval(this.timejian)
		}
	}
</script>

<style lang="scss">
	.audio-page {
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		// box-shadow: 3upx 3upx 6upx #ccc;

		.box-left {
			width: 10%;
			position: relative;
			display: flex;

			.box-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}

			.page-btn {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 3;

				image {
					width: 50upx;
					height: 50upx;
					// background-color: rgba($color: #000000, $alpha: 0.3);
					border-radius: 50%;
				}
			}
		}

		.box-content {
			width: 90%;
			height: 100%;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			padding: 0 30upx;
			box-sizing: border-box;
			font-size: 24upx;

			.content-name {
				width: 100%;
				display: -webkit-box;
				/* 弹性盒模型 */
				-webkit-box-orient: vertical;
				/* 元素垂直居中*/
				-webkit-line-clamp: 1;
				/*  文字显示的行数*/
				overflow: hidden;
				/* 超出隐藏 */
			}

			.progress {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				slider {
					width: 80%;
				}
			}
		}
	}
</style>